{% extends 'base.html' %}
{% load static %}

{% block title %}湘西全景风情游 - 探索湖南秘境{% endblock %}

{% block extra_css %}
<!-- 引入外部资源 -->
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style type="text/tailwindcss">
    @layer utilities {
        .text-shadow {
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }
        .text-shadow-lg {
            text-shadow: 0 4px 8px rgba(0,0,0,0.7);
        }
        .transition-transform {
            transition-property: transform;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 300ms;
        }
        .scale-up-hover:hover {
            transform: scale(1.03);
        }
        .bg-blur {
            backdrop-filter: blur(8px);
        }
    }
</style>

<style>
/* 基础变量定义 */
:root {
    --primary-brown: #8B4513; /* 木质建筑棕 */
    --primary-green: #2F4F4F; /* 沱江青绿色 */
    --accent-red: #9E2A2B; /* 苗族服饰红 */
    --accent-blue: #1A3A59; /* 蜡染蓝 */
    --light-bg: #F5F1E9; /* 米白色底 */
    --wood-tone: #D2B48C; /* 木色边框 */
    --dark: #333333;
    --light: #FFFFFF;
    --gray-light: #F3F4F6;
    --gray: #9CA3AF;
}

/* 通用样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: var(--dark);
    background-color: var(--light);
}

.container {
    width: 100%;
    max-width: 1128px;
    margin: 0 auto;
    padding: 0 15px;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 头部导航样式 */
.sub-header {
    height: 70px;
    background-image: url("{% static 'img/border-pattern.png' %}"); /* 苗族织锦边框 */
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 120px 8px;
}

.sub-header .logo {
    width: 234px;
    height: 70px;
    float: left;
    display: flex;
    align-items: center;
    gap: 15px;
}

.sub-header .logo a {
    color: var(--primary-brown);
    text-decoration: none;
}

.sub-header .name {
    color: var(--primary-brown);
    font-size: 24px;
    font-family: "Ma Shan Zheng", cursive;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.sub-header .menu-list {
    float: left;
    height: 70px;
    line-height: 70px;
}

.sub-header .menu-list a {
    display: inline-block;
    padding: 0 10px;
    color: var(--primary-brown);
    font-size: 16px;
    text-decoration: none;
    position: relative;
    font-weight: 500;
}

.sub-header .menu-list a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10px;
    width: 0;
    height: 2px;
    background-color: var(--accent-red);
    transition: width 0.3s;
}

.sub-header .menu-list a:hover {
    color: var(--accent-red);
}

.sub-header .menu-list a:hover::after {
    width: calc(100% - 20px);
}

.sub-header .logon {
    float: right;
    height: 70px;
    line-height: 70px;
}

.sub-header .logon a {
    display: inline-block;
    padding: 0 10px;
    color: var(--primary-brown);
    font-size: 16px;
    text-decoration: none;
}

.sub-header .logon a:hover {
    color: var(--accent-red);
}

/* 用户菜单样式 */
.user-menu-container {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 主要内容区域样式 */
section {
    scroll-margin-top: 80px;
}

.section-title {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: bold;
    margin-bottom: 4px;
    color: var(--dark);
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--gray);
    max-width: 2xl;
    margin: 0 auto 16px;
}

/* 英雄区域样式 */
#home {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#home .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

#home .hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#home .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

#home .hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 15px;
}

#home h1 {
    font-size: clamp(2.5rem, 8vw, 5rem);
    color: white;
    text-shadow: 0 4px 8px rgba(0,0,0,0.7);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

#home p {
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    max-width: 3xl;
    margin: 0 auto 2.5rem;
}

#home .scroll-indicator {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

#home .scroll-indicator a {
    color: white;
    display: inline-block;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}

/* 按钮样式 */
.btn {
    display: inline-block;
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: 999px;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--accent-red);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    background-color: #8a2425;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid white;
    color: white;
}

.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* 景点展示区域 */
#attractions {
    padding: 5rem 0;
    background-color: var(--gray-light);
}

.attractions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .attractions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .attractions-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.attraction-card {
    background-color: white;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.attraction-card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.attraction-image {
    position: relative;
    height: 16rem;
    overflow: hidden;
}

.attraction-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.attraction-card:hover .attraction-image img {
    transform: scale(1.1);
}

.attraction-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.attraction-title {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    color: white;
    font-size: 1.25rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.attraction-content {
    padding: 1.5rem;
}

.attraction-description {
    color: var(--gray);
    margin-bottom: 1rem;
}

.attraction-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.attraction-price {
    color: var(--accent-red);
    font-weight: bold;
}

.attraction-link {
    color: var(--primary-green);
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.attraction-link i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.attraction-link:hover {
    color: #233939;
}

.attraction-link:hover i {
    transform: translateX(3px);
}

/* 特色体验区域 */
#experiences {
    padding: 5rem 0;
    background-color: var(--gray-light);
}

.experiences-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .experiences-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.experience-card {
    background-color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-align: center;
}

.experience-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.experience-icon {
    width: 4rem;
    height: 4rem;
    background-color: rgba(47, 79, 79, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.experience-icon i {
    font-size: 2rem;
    color: var(--primary-green);
}

.experience-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
}

.experience-description {
    color: var(--gray);
}

/* 行程推荐区域 */
#itinerary {
    padding: 5rem 0;
    background-color: white;
}

.itinerary-card {
    background-color: var(--gray-light);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .itinerary-card {
        display: flex;
        gap: 2rem;
        padding: 2.5rem;
    }

    .itinerary-details {
        flex: 1;
    }

    .itinerary-image-container {
        flex: 1;
    }
}

.itinerary-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.itinerary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.itinerary-meta-item {
    display: flex;
    align-items: center;
}

.itinerary-meta-item i {
    color: var(--primary-green);
    margin-right: 0.5rem;
}

.itinerary-highlights {
    margin-bottom: 1.5rem;
}

.itinerary-highlights-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
}

.itinerary-highlights-list {
    list-style: none;
}

.itinerary-highlights-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.itinerary-highlights-list li i {
    color: var(--accent-red);
    margin-right: 0.5rem;
    margin-top: 0.25rem;
}

.itinerary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.itinerary-image-container {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    min-height: 18.75rem;
}

.itinerary-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itinerary-price-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 1.5rem;
    color: white;
}

.itinerary-price-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.itinerary-price-label {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.25rem;
}

.itinerary-price {
    font-size: 2rem;
    font-weight: bold;
}

.itinerary-price span {
    font-size: 1rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.8);
}

.itinerary-includes {
    text-align: right;
}

.itinerary-includes-label {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.25rem;
}

/* 预订区域 */
#booking {
    padding: 5rem 0;
    background-color: rgba(47, 79, 79, 0.05);
}

.booking-container {
    max-width: 5xl;
    margin: 0 auto;
    background-color: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .booking-container {
        display: flex;
    }

    .booking-image-container {
        flex: 1;
    }

    .booking-form-container {
        flex: 1;
    }
}

.booking-image-container {
    position: relative;
}

.booking-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.booking-image-overlay {
    position: relative;
    height: 100%;
    padding: 2.5rem;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.booking-overlay-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.booking-overlay-description {
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.booking-overlay-features {
    display: flex;
    gap: 2rem;
}

.booking-overlay-feature {
    display: flex;
    align-items: center;
}

.booking-overlay-feature i {
    margin-right: 0.5rem;
}

.booking-form-container {
    padding: 2.5rem;
}

.booking-form-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 2px rgba(47, 79, 79, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 游客评价区域 */
#testimonials {
    padding: 5rem 0;
    background-color: white;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.testimonial-card {
    background-color: var(--gray-light);
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.testimonial-author {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.testimonial-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1rem;
}

.testimonial-author-info h4 {
    font-weight: bold;
}

.testimonial-rating {
    color: #FBBF24;
    font-size: 0.875rem;
}

.testimonial-content {
    color: var(--gray);
}

/* 联系我们区域 */
#contact {
    padding: 5rem 0;
    background-color: var(--gray-light);
}

.contact-container {
    max-width: 5xl;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .contact-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

.contact-form {
    background-color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.contact-info {
    background-color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.contact-info-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.contact-details {
    margin-bottom: 2.5rem;
}

.contact-detail {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.contact-detail-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(47, 79, 79, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.contact-detail-icon i {
    color: var(--primary-green);
}

.contact-detail-info h4 {
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.contact-detail-info p {
    color: var(--gray);
}

.social-links-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(47, 79, 79, 0.1);
    color: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link:hover {
    background-color: rgba(47, 79, 79, 0.2);
}

/* 返回顶部按钮 */
#back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: var(--primary-green);
    color: white;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 100;
}

#back-to-top:hover {
    background-color: #233939;
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

/* 移动端菜单 */
#mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    #mobile-menu {
        display: block;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background-color: white;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        z-index: 99;
    }

    #mobile-menu.hidden {
        display: none;
    }

    #mobile-menu a {
        display: block;
        padding: 1rem;
        color: var(--primary-brown);
        text-decoration: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    #mobile-menu a:hover {
        background-color: var(--light-bg);
        color: var(--accent-red);
    }

    .menu-toggle {
        display: block;
        float: right;
        line-height: 70px;
        padding: 0 10px;
        color: var(--primary-brown);
        font-size: 1.5rem;
        cursor: pointer;
    }
}
</style>
{% endblock %}

{% block content %}
    <!-- 英雄区域 -->
    <section id="home">
        <div class="hero-bg">
            <img src="{% static 'img/xx1.png' %}" alt="湘西风景">
        </div>

        <div class="hero-content container">
            <h1>湘西全景风情游</h1>
            <p>探索张家界的奇观，感受芙蓉镇的夜色，体验苗寨的独特文化，开启一段难忘的湘西之旅</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#attractions" class="btn btn-primary">探索景点</a>
                <a href="#booking" class="btn btn-outline">立即预订</a>
            </div>
        </div>

        <div class="scroll-indicator">
            <a href="#attractions">
                <i class="fa fa-angle-down text-3xl"></i>
            </a>
        </div>
    </section>

    <!-- 景点展示 -->
    <section id="attractions">
        <div class="container">
            <div class="text-center mb-16">
                <h2 class="section-title">湘西精选景点</h2>
                <p class="section-subtitle">每一处风景都是大自然的馈赠，每一个村落都承载着千年的故事</p>
            </div>

            <div class="attractions-grid">
                <!-- 张家界 -->
                <div class="attraction-card">
                    <div class="attraction-image">
                        <img src="{% static 'img/zjj.png' %}" alt="张家界奇观">
                        <h3 class="attraction-title">张家界奇观探险团</h3>
                    </div>
                    <div class="attraction-content">
                        <p class="attraction-description">漫步于云端之上，探索世界自然遗产的壮丽景观，体验惊险刺激的玻璃栈道。</p>
                        <div class="attraction-footer">
                            <span class="attraction-price">¥699/人起</span>
                            <a href="#booking" class="attraction-link">了解详情 <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>

                <!-- 芙蓉镇 -->
                <div class="attraction-card">
                    <div class="attraction-image">
                        <img src="{% static 'img/frz.png' %}" alt="芙蓉镇夜景">
                        <h3 class="attraction-title">芙蓉镇夜景寻味团</h3>
                    </div>
                    <div class="attraction-content">
                        <p class="attraction-description">夜游挂在瀑布上的千年古镇，品尝地道湘西美食，感受独特的吊脚楼文化。</p>
                        <div class="attraction-footer">
                            <span class="attraction-price">¥599/人起</span>
                            <a href="#booking" class="attraction-link">了解详情 <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>

                <!-- 德夯苗寨 -->
                <div class="attraction-card">
                    <div class="attraction-image">
                        <img src="{% static 'img/mz.png' %}" alt="德夯苗寨民俗">
                        <h3 class="attraction-title">德夯苗寨民俗体验游</h3>
                    </div>
                    <div class="attraction-content">
                        <p class="attraction-description">深入苗寨，体验拦门酒、苗家歌舞、传统手工艺，感受浓郁的苗族文化。</p>
                        <div class="attraction-footer">
                            <span class="attraction-price">¥499/人起</span>
                            <a href="#booking" class="attraction-link">了解详情 <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>

                <!-- 湘西全景 -->
                <div class="attraction-card">
                    <div class="attraction-image">
                        <img src="{% static 'img/xx2.png' %}" alt="湘西全景">
                        <h3 class="attraction-title">湘西全景风情游</h3>
                    </div>
                    <div class="attraction-content">
                        <p class="attraction-description">一站式体验湘西精华，从自然风光到人文风情，全方位感受湘西魅力。</p>
                        <div class="attraction-footer">
                            <span class="attraction-price">¥1699/人起</span>
                            <a href="#booking" class="attraction-link">了解详情 <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 特色体验 -->
    <section id="experiences">
        <div class="container">
            <div class="text-center mb-16">
                <h2 class="section-title">独特湘西体验</h2>
                <p class="section-subtitle">不止于观光，更是一场深入湘西灵魂的文化之旅</p>
            </div>

            <div class="experiences-grid">
                <div class="experience-card">
                    <div class="experience-icon">
                        <i class="fa fa-cutlery"></i>
                    </div>
                    <h3 class="experience-title">地道美食</h3>
                    <p class="experience-description">品尝湘西腊肉、酸鱼、糍粑等特色美食，感受酸辣鲜香的独特风味。</p>
                </div>

                <div class="experience-card">
                    <div class="experience-icon">
                        <i class="fa fa-music"></i>
                    </div>
                    <h3 class="experience-title">民俗表演</h3>
                    <p class="experience-description">欣赏苗族鼓舞、土家族摆手舞等传统表演，感受浓郁的民族风情。</p>
                </div>

                <div class="experience-card">
                    <div class="experience-icon">
                        <i class="fa fa-hand-scissors-o"></i>
                    </div>
                    <h3 class="experience-title">手工艺体验</h3>
                    <p class="experience-description">亲手制作苗族银饰、蜡染等手工艺品，体验传统技艺的独特魅力。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 行程推荐 -->
    <section id="itinerary">
        <div class="container">
            <div class="text-center mb-16">
                <h2 class="section-title">精选行程</h2>
                <p class="section-subtitle">精心设计的行程，让您深度体验湘西的每一处精彩</p>
            </div>

            <div class="itinerary-card">
                <div class="itinerary-details">
                    <h3 class="itinerary-title">湘西全景5日游</h3>

                    <div class="itinerary-meta">
                        <div class="itinerary-meta-item">
                            <i class="fa fa-calendar"></i>
                            <span>5天4晚</span>
                        </div>
                        <div class="itinerary-meta-item">
                            <i class="fa fa-users"></i>
                            <span>小团出行</span>
                        </div>
                        <div class="itinerary-meta-item">
                            <div class="flex text-yellow-400">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                                <span class="ml-2 text-gray-600">4.8分</span>
                            </div>
                        </div>
                    </div>

                    <div class="itinerary-highlights">
                        <h4 class="itinerary-highlights-title">行程亮点</h4>
                        <ul class="itinerary-highlights-list">
                            <li>
                                <i class="fa fa-check-circle"></i>
                                <span>游览张家界国家森林公园，感受奇峰异石</span>
                            </li>
                            <li>
                                <i class="fa fa-check-circle"></i>
                                <span>体验芙蓉镇夜景，漫步瀑布之上的古镇</span>
                            </li>
                            <li>
                                <i class="fa fa-check-circle"></i>
                                <span>深入德夯苗寨，参与苗族特色活动</span>
                            </li>
                            <li>
                                <i class="fa fa-check-circle"></i>
                                <span>品尝湘西各地特色美食，感受舌尖上的湘西</span>
                            </li>
                            <li>
                                <i class="fa fa-check-circle"></i>
                            <span>专业导游全程讲解，深入了解湘西文化历史</span>
                        </li>
                    </ul>
                </div>

                <div class="itinerary-actions">
                    <a href="#booking" class="btn btn-primary">立即预订</a>
                    <a href="#" class="btn btn-outline text-primary-green border-primary-green">查看详细行程</a>
                </div>
            </div>

            <div class="itinerary-image-container">
                <img src="{% static 'img/itinerary.jpg' %}" alt="湘西全景5日游行程" class="itinerary-image">
                <div class="itinerary-price-overlay">
                    <div class="itinerary-price-content">
                        <div>
                            <div class="itinerary-price-label">起售价</div>
                            <div class="itinerary-price">¥1699<span>/人</span></div>
                        </div>
                        <div class="itinerary-includes">
                            <div class="itinerary-includes-label">费用包含</div>
                            <div>门票·住宿·交通</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 预订区域 -->
    <section id="booking">
        <div class="container">
            <div class="text-center mb-16">
                <h2 class="section-title">立即预订</h2>
                <p class="section-subtitle">填写以下信息，开启您的湘西之旅</p>
            </div>

            <div class="booking-container">
                <div class="booking-image-container">
                    <img src="{% static 'img/booking-bg.jpg' %}" alt="湘西美景" class="booking-image">
                    <div class="booking-image-overlay">
                        <h3 class="booking-overlay-title">为什么选择我们</h3>
                        <p class="booking-overlay-description">我们专注于湘西深度游，为您提供最地道的旅行体验，让您的湘西之行难忘而充实。</p>
                        <div class="booking-overlay-features">
                            <div class="booking-overlay-feature">
                                <i class="fa fa-check-circle"></i>
                                <span>专业导游</span>
                            </div>
                            <div class="booking-overlay-feature">
                                <i class="fa fa-check-circle"></i>
                                <span>精品小团</span>
                            </div>
                            <div class="booking-overlay-feature">
                                <i class="fa fa-check-circle"></i>
                                <span>品质住宿</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="booking-form-container">
                    <h3 class="booking-form-title">预订信息</h3>
                    <form>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">姓名</label>
                                <input type="text" class="form-control" placeholder="请输入您的姓名">
                            </div>
                            <div class="form-group">
                                <label class="form-label">手机号码</label>
                                <input type="tel" class="form-control" placeholder="请输入您的手机号码">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">出行日期</label>
                                <input type="date" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="form-label">出行人数</label>
                                <select class="form-control">
                                    <option>1人</option>
                                    <option>2人</option>
                                    <option>3人</option>
                                    <option>4人</option>
                                    <option>5人及以上</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">选择行程</label>
                            <select class="form-control">
                                <option>张家界奇观探险团</option>
                                <option>芙蓉镇夜景寻味团</option>
                                <option>德夯苗寨民俗体验游</option>
                                <option>湘西全景风情游</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label">特殊需求</label>
                            <textarea class="form-control" rows="3" placeholder="请输入您的特殊需求（可选）"></textarea>
                        </div>

                        <button type="submit" class="btn btn-primary w-full">提交预订</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- 游客评价 -->
    <section id="testimonials">
        <div class="container">
            <div class="text-center mb-16">
                <h2 class="section-title">游客评价</h2>
                <p class="section-subtitle">听听他们怎么说，真实的旅行体验分享</p>
            </div>

            <div class="testimonials-grid">
                <div class="testimonial-card">
                    <div class="testimonial-author">
                        <img src="{% static 'img/user1.jpg' %}" alt="游客头像" class="testimonial-avatar">
                        <div class="testimonial-author-info">
                            <h4>张先生</h4>
                            <div class="testimonial-rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="testimonial-content">"湘西的美景令人震撼，导游非常专业，讲解详细生动，让我们深入了解了湘西的历史文化。住宿条件也很好，全程无忧，非常满意的一次旅行！"</p>
                </div>

                <div class="testimonial-card">
                    <div class="testimonial-author">
                        <img src="{% static 'img/user2.jpg' %}" alt="游客头像" class="testimonial-avatar">
                        <div class="testimonial-author-info">
                            <h4>李女士</h4>
                            <div class="testimonial-rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                        </div>
                    </div>
                    <p class="testimonial-content">"芙蓉镇的夜景太美了，苗寨的体验活动非常有意义，孩子们玩得很开心。行程安排合理，不会太赶，能好好欣赏美景，值得推荐！"</p>
                </div>

                <div class="testimonial-card">
                    <div class="testimonial-author">
                        <img src="{% static 'img/user3.jpg' %}" alt="游客头像" class="testimonial-avatar">
                        <div class="testimonial-author-info">
                            <h4>王先生</h4>
                            <div class="testimonial-rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="testimonial-content">"张家界的山真的太壮观了，玻璃栈道很刺激！导游服务周到，团里人不多，体验很好。美食也很有特色，特别是湘西腊肉，非常美味！"</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact">
        <div class="container">
            <div class="text-center mb-16">
                <h2 class="section-title">联系我们</h2>
                <p class="section-subtitle">有任何问题，请随时联系我们，我们将竭诚为您服务</p>
            </div>

            <div class="contact-container">
                <div class="contact-content">
                    <div class="contact-form">
                        <h3 class="booking-form-title">发送消息</h3>
                        <form>
                            <div class="form-row">
                                <div class="form-group">
                                    <label class="form-label">姓名</label>
                                    <input type="text" class="form-control" placeholder="请输入您的姓名">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">电子邮箱</label>
                                    <input type="email" class="form-control" placeholder="请输入您的电子邮箱">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label">主题</label>
                                <input type="text" class="form-control" placeholder="请输入消息主题">
                            </div>

                            <div class="form-group">
                                <label class="form-label">消息内容</label>
                                <textarea class="form-control" rows="5" placeholder="请输入您的消息内容"></textarea>
                            </div>

                            <button type="submit" class="btn btn-primary w-full">发送消息</button>
                        </form>
                    </div>

                    <div class="contact-info">
                        <h3 class="contact-info-title">联系方式</h3>
                        <div class="contact-details">
                            <div class="contact-detail">
                                <div class="contact-detail-icon">
                                    <i class="fa fa-map-marker"></i>
                                </div>
                                <div class="contact-detail-info">
                                    <h4>地址</h4>
                                    <p>湖南省张家界市永定区子午路158号</p>
                                </div>
                            </div>
                            <div class="contact-detail">
                                <div class="contact-detail-icon">
                                    <i class="fa fa-phone"></i>
                                </div>
                                <div class="contact-detail-info">
                                    <h4>电话</h4>
                                    <p>0744-8888888</p>
                                </div>
                            </div>
                            <div class="contact-detail">
                                <div class="contact-detail-icon">
                                    <i class="fa fa-envelope"></i>
                                </div>
                                <div class="contact-detail-info">
                                    <h4>电子邮箱</h4>
                                    <p>info@xiangxitour.com</p>
                                </div>
                            </div>
                            <div class="contact-detail">
                                <div class="contact-detail-icon">
                                    <i class="fa fa-clock-o"></i>
                                </div>
                                <div class="contact-detail-info">
                                    <h4>工作时间</h4>
                                    <p>周一至周日 8:00-20:00</p>
                                </div>
                            </div>
                        </div>

                        <h3 class="social-links-title">关注我们</h3>
                        <div class="social-links">
                            <a href="#" class="social-link"><i class="fa fa-weixin"></i></a>
                            <a href="#" class="social-link"><i class="fa fa-weibo"></i></a>
                            <a href="#" class="social-link"><i class="fa fa-instagram"></i></a>
                            <a href="#" class="social-link"><i class="fa fa-youtube-play"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 返回顶部按钮 -->
    <a href="#home" id="back-to-top">
        <i class="fa fa-angle-up text-xl"></i>
    </a>
{% endblock %}

{% block extra_js %}
<script>
    // 移动端菜单切换
    document.addEventListener('DOMContentLoaded', function() {
        const menuToggle = document.querySelector('.menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');

        if (menuToggle && mobileMenu) {
            menuToggle.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
            });
        }

        // 返回顶部按钮
        const backToTopButton = document.getElementById('back-to-top');

        window.addEventListener('scroll', function() {
            if (window.pageYOffset > 300) {
                backToTopButton.classList.add('visible');
            } else {
                backToTopButton.classList.remove('visible');
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);

                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });

                    // 如果是移动端，点击后关闭菜单
                    if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
    });
</script>
{% endblock %}
